<template>
  <header class="header">
    <div class="logo">
      <Logo />
    </div>
    <nav>
      <RouterLink to="/">首页</RouterLink>
      <ul class="site-nav">
        <li v-for="(v, k) of categoriser.categories" :key="k">
          <RouterLink :to="`/categories/${v.ID}`">{{ v.Name }}</RouterLink>
        </li>
      </ul>
      <n-dropdown
        @select="(key) => router.push(`/categories/${key}`)"
        trigger="click"
        :options="categoriser.navCat"
      >
        <div class="more">更多</div>
      </n-dropdown>
      <div class="space"></div>
      <n-input
        v-model:value="search"
        placeholder="搜索"
        style="max-width: 10em; margin: 0 0.5em"
        @keydown.enter="searcher"
      ></n-input>
      <div v-if="!user.user" class="login-group">
        <RouterLink to="/login">登录</RouterLink>
        |
        <RouterLink to="/register">注册</RouterLink>
      </div>
      <div class="icons" v-else>
        <n-badge :value="user.currentOrderItems?.length" :max="10">
          <NIcon @click="$router.push(`/cart`)" size="30">
            <Cart style="color: white" />
          </NIcon>
        </n-badge>
        <NDropdown
          :options="dropOptions"
          @select="handleSelect"
          trigger="hover"
        >
          <NIcon size="25">
            <Person />
          </NIcon>
        </NDropdown>
      </div>
    </nav>
  </header>
</template>

<script lang="ts" setup>
import { NInput, NBadge, NIcon, NDropdown, useMessage } from "naive-ui";
import { Cart, Person } from "@vicons/ionicons5";
import { ref } from "vue";
import { RouterLink, useRouter } from "vue-router";

import { useUserStore } from "@/stores/user";
import { useCategoriserStore } from "@/stores/category";
import Logo from "@/components/icons/Logo.vue";

const message = useMessage();
const router = useRouter();
const search = ref("");

function searcher() {
  router.push({ path: "/products", query: { keywords: search.value } });
  search.value = "";
}

const categoriser = useCategoriserStore();
const user = useUserStore();

const dropOptions = [
  {
    label: "个人中心",
    key: "userInfo",
  },
  {
    label: "退出登录",
    key: "logOut",
  },
];

async function handleSelect(key: string) {
  switch (key) {
    case "logOut":
      await user.loginOut();
      message.success("退出登录成功");
      break;
    case "userInfo":
      router.push("/userinfo");
      break;
  }
}
</script>

<style lang="less" scoped>
.header {
  font-weight: 600;
  max-width: var(--content-width);
  margin: 0 auto;

  .logo {
    padding: 1.5em 1.5em 1em;
  }

  nav {
    display: flex;
    align-items: center;
    margin: 0 0.25em;
    padding: 1em 1.5em;
    border-radius: 0.5em;
    color: #fff;
    background-color: var(--primary-color);

    .site-nav {
      display: flex;
      margin-left: 1em;

      > * + * {
        margin-left: 1em;
      }
    }

    .more {
      display: none;
      margin-left: 1em;
    }

    .space {
      flex: 1;
    }

    .icons {
      display: flex;
      align-items: center;
      gap: 0.5em;

      > * {
        cursor: pointer;
      }
    }
  }
}

@media (max-width: 450px) {
  .header {
    nav {
      .site-nav {
        display: none;
      }

      .more {
        display: block;
      }
    }
  }
}
</style>
